<template>
  <div class="yc-turnpagebox">
    <canvas ref="page" class="yc-turnpage"></canvas>
  </div>
</template>

<script>
import Page from '../js/page'

export default {
  props: {
    color: {
      default: '#fff'
    },
    option: {
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {}
  },
  methods: {
    isRunning () {
      return this.page.isRunning
    },
    turn () {
      this.page.start()
    },
    isClear () {
      return this.page.isClear
    },
    clear () {
      this.page.clear()
    }
  },
  mounted () {
    this.page = new Page(this.$refs.page, this.option)
    this.$emit('mounted', this)
  },
  destroyed () {
    this.page.dispose()
  }
}
</script>

<style>
  .yc-turnpagebox {
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .yc-turnpage {
    width: 100%;
    height: 100%;
  }
</style>
